<template>
  <view class="page custom-page">
    <custom-head gradient back title="积分动态"></custom-head>
    <view class="content">
      <view v-for="(item, index) in stockRecordingList" class="stockItem">
        <view class="content_item">
          <view class="top_left">
            <image class="img" :src="item.avatar" mode="widthFix" />

            <view class="top_right">
              <view>
                <text class="text_1">{{ item.title }}</text>
                <text>{{ item.name }}</text>
              </view>

              <view>
                {{ item.desc }}
              </view>
            </view>
          </view>

          <view class="buttom_text">
            <view> <u-icon name="clock"></u-icon>{{ item.created_at }}</view>
            <view :class="{size_28: true, bule: item.cnt>0? true:false, red: item.cnt>0? false:true}">{{item.cnt>0? '+':''}} {{ item.cnt }} /积分</view>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>
<script>
import { getScore_history, getScore } from '../../api/modules/score_history';
import dayjs from 'dayjs';

export default {
  data() {
    return {
      stockRecordingList: [],
      static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
      teachers: getApp().globalData.glb_list.teachers, // 全局老师
      students: getApp().globalData.glb_list.students, // 全局老学生
    }
  },
  onLoad(params) {
      this._getScore_history()
  },

  mounted() {},

  methods: {
   _getScore_history() {
    let fn1 = new Promise((resolve, reject) => {
      getScore_history({
        page_no: 1,
        page_size: 10000
      }).then((res) => {
        resolve(res)
      })
    });

    let fn2 = new Promise((resolve, reject) => {
      getScore({
        page_no: 1,
        page_size: 10000
      }).then((res) => {
        resolve(res)
      })
    });

    Promise.all([fn1, fn2]).then(arr => {
      const [arr1, arr2] = arr || [];
      const score_historyList = arr1.data.list.filter(i => i.sid === this.glbId)
      const scoreList = arr2.data.list.filter(i => i.sid === this.glbId)

      for(let i=0; i<score_historyList.length; i++) {
        for(let j=0; j<scoreList.length; j++) {
          if (score_historyList[i].score_id === scoreList[j].id) {
            score_historyList[i].desc = scoreList[j].desc;
            score_historyList[i].group = scoreList[j].group;
            score_historyList[i].title = scoreList[j].title;
          }
        }
      }

      for(let i=0; i<score_historyList.length; i++) {
        for(let j=0; j<this.students.length; j++) {
          if (score_historyList[i].id === this.students[j].id) {
            score_historyList[i].avatar = this.students[j].avatar;
          }
        }
      }

      for(let i=0; i<score_historyList.length; i++) {
        for(let j=0; j<this.teachers.length; j++) {
          if (score_historyList[i].id === this.teachers[j].id) {
            score_historyList[i].name = this.teachers[j].name;
          }
        }
      }

      this.stockRecordingList = score_historyList.map(i => ({...i, created_at: dayjs(i.created_at).format('MM/DD HH:mm:ss'), avatar: `${this.static_uri}${i.avatar}`}))

      console.log('arr1', score_historyList)
      // console.log('arr2', scoreList)
      // console.log('--students--', this.students)
      // console.log('--teachers--', this.teachers)
    })
   }
  }
}
</script>
<style scoped lang="scss">
.page {
  height: 100vh;
}
.content {
  padding: 20rpx;

  .stockItem {
    margin-bottom: 20rpx;
    .content_item {
      width: 100%;
      height: 163rpx;
      background-color: #fff;
      padding: 18rpx 16rpx 22rpx 18rpx;
      border-radius: 8rpx;
      .top_left {
        display: flex;
        align-items: center;
        
        .img {
          width: 66rpx !important;
          height: 66rpx !important;
          border-radius: 50%;
          margin-right: 21rpx;
        }

        .text_1 {
          font-size: 32rpx;
          font-weight: 700;
          margin-right: 4rpx;
        }
      }

      .buttom_text {
        display: flex;
        justify-content: space-between;
        margin-top: 7rpx;
        font-size: 24rpx;

        .size_28 {
          font-size: 28rpx;
        }

        .red {
          color: #F84638;
        }
        .bule {
          color: #2979FF;
        }
      }

    }
  }
  
}
</style>
